<template>
  <el-dialog :title="title" :visible="show" :before-close="handleClose" width="768px">
    <el-form :label-width="formLabelWidth">
      <el-form-item label="图表名称">
        <el-row :gutter="rowGutter">
          <el-col :span="16">
            <el-input
              v-model="formData.title"
              placeholder="请输入图表的名称"
              autocomplete="off"
              :style="{width:'100%'}"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-select v-model="formData.type" placeholder="图表类型" :style="{width:'100%'}">
              <el-option
                v-for="item in options.chartTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-row :gutter="rowGutter">
          <el-col :span="6">
            <el-select
              v-model="formData.timeConfig.type"
              :style="{width:'100%'}"
              placeholder="请选择时间范围类型"
            >
              <el-option
                v-for="item in options.timeConfigList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="10" v-if="formData.timeConfig.type!='CustomList'">
            <el-date-picker
              :style="{width:'100%'}"
              v-model="formData.timeConfig.start"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
            ></el-date-picker>
          </el-col>
          <el-col :span="6" v-if="formData.timeConfig.type!='CustomList'">
            <el-input-number
              v-model="formData.timeConfig.count"
              :min="1"
              :max="24"
              :style="{width:'100%'}"
            ></el-input-number>
          </el-col>
          <el-col :span="16" v-if="formData.timeConfig.type=='CustomList'">
            <el-input
              placeholder="输入8位日期，顺序由近至远，至少输入两个，用空格分隔"
              v-model="formData.timeConfig.list"
              :style="{width:'100%'}"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="筛选项目">
        <el-row :gutter="rowGutter">
          <el-col :span="6">
            <el-select
              v-model="formData.filter.keyword"
              placeholder="请选关键字"
              :style="{width:'100%'}"
            >
              <el-option label="不筛选" value></el-option>
              <el-option
                v-for="item in options.keywordList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
              <!-- <el-option label="检查类型" value="type"></el-option> -->
            </el-select>
          </el-col>
          <el-col :span="16">
            <el-input
              v-model="formData.filter.value"
              placeholder="输入接受值，多个值用空格分隔，结果取交集"
              autocomplete="off"
              :style="{width:'100%'}"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="统计项目">
        <el-row :gutter="rowGutter">
          <el-col :span="6">
            <el-select v-model="formData.keyword" placeholder="请选关键字" :style="{width:'100%'}">
              <el-option
                v-for="item in options.keywordList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
              <!-- <el-option label="检查类型" value="type"></el-option> -->
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设为主坐标">
              <el-switch v-model="formData.reverse" disabled></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统计分值">
              <el-switch v-model="formData.summary"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <div :style="{textAlign:'center'}">
        <el-button v-if="!this.config" type="primary" @click="handleSubmit">创建图表</el-button>
        <el-button v-if="this.config" type="primary" @click="handleSubmit">修改图表</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
/*
{
  timeConfig: { type: "PerYear", count: 1 },
  filter: { keyword: "", value: ["", ""] },
  keyword: "clientOffice",
  type: "pie",
  title: "今年以来各科室检查情况"
}
*/
export default {
  props: ["show", "config"],
  data() {
    return {
      options: {
        keywordList: [
          { label: "当事人姓名", value: "clientName" },
          { label: "当事人科室", value: "clientOffice" },
          { label: "当事人班组", value: "clientGroup" },
          { label: "当事人资质", value: "clientRank" },
          { label: "提交人姓名", value: "userName" },
          { label: "提交人科室", value: "userOffice" },
          { label: "提交人班组", value: "userGroup" },
          { label: "检查项目", value: "category" },
          { label: "事发席位", value: "seat" },
          { label: "事发扇区", value: "sector" }
        ],
        timeConfigList: [
          { label: "每月", value: "PerMonth" },
          { label: "每季度", value: "PerSeason" },
          { label: "每半年", value: "PerHalf" },
          { label: "每年", value: "PerYear" },
          { label: "每30天", value: "Per30Days" },
          { label: "每90天", value: "Per90Days" },
          { label: "每180天", value: "Per180Days" },
          { label: "每365天", value: "Per365Days" },
          { label: "自定义", value: "CustomList" }
        ],
        chartTypeList: [
          { label: "条形图", value: "bar" },
          { label: "柱状图", value: "histogram" },
          { label: "折线图", value: "line" },
          { label: "散点图", value: "scatter" },
          { label: "饼图", value: "pie" },
          { label: "玫瑰饼图", value: "pieRose" },
          { label: "环图", value: "ring" },
          { label: "玫瑰环图", value: "ringRose" },
          { label: "瀑布图", value: "waterfall" }
        ]
      },
      rowGutter: 20,
      formLabelWidth: "100px",
      formData: {
        title: "",
        timeConfig: { type: "PerMonth", start: new Date(), count: 0, list: ""},
        filter: { keyword: "", value: "" },
        keyword: "",
        type: "bar",
        summary: false,
        reverse: false
      }
    };
  },
  computed: {
    title() {
      if (this.config) {
        return "修改图表";
      } else {
        return "创建图表";
      }
    },
    newConfig() {
      let start = new Date(this.formData.timeConfig.start);
      return {
        title: this.formData.title,
        timeConfig: {
          type: this.formData.timeConfig.type,
          start: start.getTime(),
          count: this.formData.timeConfig.count,
          list: this.formData.timeConfig.list
        },
        filter: this.formData.filter,
        keyword: this.formData.keyword,
        type: this.formData.type,
        summary: this.formData.summary,
        reverse: this.formData.reverse
      };
    }
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleSubmit() {
      this.$emit("submit", this.newConfig);
    }
  },
  mounted() {
    if (this.config) {
      this.formData = JSON.parse(JSON.stringify(this.config));
      // this.formData = this.config;
    }
  }
};
</script>